<template>
    <div id="SwiperTop">
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in state.images" :key="image">
                <img :src="image.pic" />
            </van-swipe-item>
        </van-swipe>

    </div>
</template>


<script>
import { onMounted , reactive } from 'vue';
import { getBanners } from '@/api/home'

export default {
    setup() {
        //  将
        const state = reactive({
            images :[
                'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
                'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
            ]
        })
        
        onMounted(async () => {
            // 获取到接口中的轮播图
            // axios.get('http://localhost:3000/banner?type=2').then((res) => {
            //     console.log(res)
            //     state.images = res.data.banners

            // })
            const res = await getBanners();
            state.images = res.data.banners

        })
        return { state };
    },
};
</script>


<!-- <script setup>
// 导入onMounted
import { onMounted,reactive } from 'vue';

// 导入axios
import axios from 'axios'


// 将原有的images改变为响应式对象,需要导入 reactive
const state = reactive({
    images: [
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ]
})


onMounted(() => {
    // 使用axios获取接口信息
    axios.get('http://localhost:3000/banner?type=2').then((res) => {
        // 调试是否获取到
        console.log(res)

        // 如果获取成功，对上面的响应式images进行赋值
        state.images = res.data.banners
    })

    // 返回state
    return {state}
})
</script> -->

<style lang="less">
#SwiperTop{
    // 防止后续使用过程中的swipe继承，需要自己设计一个id
    .van-swipe{
        width: 100%;
        // height: 20vh;
        .van-swipe-item{
            padding: 2vw;
            
            img{
                width: 100%;
                border-radius: 5px;
            }
        }
        // 滑动的小圆点样式
        .van-swipe__indicator--active{
            background: #db33c7;
            // 运行之后可以看见其样式，其中position为absolute
            bottom: 2vh;
        }

    } 

}

</style>@/api/home